<template>
  <div class="chart-container app-container nohead">
    <el-alert title=""
      type="warning" :closable="false" class="mb-10" />
    <highcharts :options="chartOptions1" :callback="myCallback"
      style="height:115px;margin-top:30px;"></highcharts>
    <highcharts :options="chartOptions2" :callback="myCallback"
      style="height:85px;margin-top:30px;">
    </highcharts>
    <highcharts :options="chartOptions3" :callback="myCallback"
      style="height:85px;margin-top:30px;">
    </highcharts>
  </div>
</template>

<script>

import { Chart } from "highcharts-vue";
import Highcharts from 'highcharts';
import highchartsBullet from 'highcharts/modules/bullet'
highchartsBullet(Highcharts)
export default {
  name: 'extend-graphDemo-highchartsBullet',
  components: {
    highcharts: Chart
  },
  data() {
    return {
      chartOptions1: {

        title: {
          text: '2017 年公司运营情况'
        },
        xAxis: {
          categories: ['<span class="hc-cat-title">营收</span><br/> 千美元']
        },
        yAxis: {
          plotBands: [{
            from: 0,
            to: 150,
            color: '#666'
          }, {
            from: 150,
            to: 225,
            color: '#999'
          }, {
            from: 225,
            to: 9e9,
            color: '#bbb'
          }],
          title: null
        },
        series: [{
          data: [{
            y: 275,
            target: 250
          }]
        }],
        tooltip: {
          pointFormat: '<b>{point.y}</b> （目标值 {point.target}）'
        }
      },
      chartOptions2: {
        xAxis: {
          categories: ['<span class="hc-cat-title">利润率</span><br/>%']
        },
        yAxis: {
          plotBands: [{
            from: 0,
            to: 20,
            color: '#666'
          }, {
            from: 20,
            to: 25,
            color: '#999'
          }, {
            from: 25,
            to: 100,
            color: '#bbb'
          }],
          labels: {
            format: '{value}%'
          },
          title: null
        },
        series: [{
          data: [{
            y: 22,
            target: 27
          }]
        }],
        tooltip: {
          pointFormat: '<b>{point.y}</b> （目标值 {point.target}）'
        }
      },
      chartOptions3: {
        xAxis: {
          categories: ['<span class="hc-cat-title">新客户</span><br/>数量']
        },
        yAxis: {
          plotBands: [{
            from: 0,
            to: 1400,
            color: '#666'
          }, {
            from: 1400,
            to: 2000,
            color: '#999'
          }, {
            from: 2000,
            to: 9e9,
            color: '#bbb'
          }],
          labels: {
            format: '{value}'
          },
          title: null
        },
        series: [{
          data: [{
            y: 1650,
            target: 2100
          }]
        }],
        tooltip: {
          pointFormat: '<b>{point.y}</b> （目标值 {point.target}）'
        },
        credits: {
          enabled: false
        }
      },

    }
  },
  mounted() {
    let option = {
      chart: {
        inverted: true,
        marginLeft: 135,
        type: 'bullet'
      },
      title: {
        text: null
      },
      legend: {
        enabled: false
      },
      yAxis: {
        gridLineWidth: 0
      },
      plotOptions: {
        series: {
          pointPadding: 0.25,
          borderWidth: 0,
          color: '#000',
          targetOptions: {
            width: '200%'
          }
        }
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      }
    }
    // Highcharts.setOptions(option);
    this.chartOptions1 = Object.assign({}, option, this.chartOptions1)
    this.chartOptions2 = Object.assign({}, option, this.chartOptions2)
    this.chartOptions3 = Object.assign({}, option, this.chartOptions3)
  },

  methods: {
    myCallback() {
      // console.log("this is callback function");
    }
  }
}
</script>
